import { Button } from 'antd-mobile'
import dayjs from 'dayjs'
import styles from '../css/navdate.module.css'
import { useSearchParams } from 'react-router-dom'
import { useMemo } from 'react'

// 组件的封装原则：如果封装的是通用组件，那么组件中需要用到的核心数据，
// 应该以 props 的方式传入
// props 对象的格式 { date: 日期 }
function NavDate(props) {
  const [sp, setSP] = useSearchParams()
  // const spObj = useMemo(() => Object.fromEntries(sp), [sp])
  const spObj = useMemo(() => Object.fromEntries(sp), [sp])

  const setDate = (step) => {
    const dtStr = dayjs(props.date).add(step, 'day').format('YYYY-MM-DD')
    // 保证：只更新 date 这一个参数，同时其它参数不丢失
    setSP({ ...spObj, date: dtStr })
  }

  return (
    <div className={styles.box}>
      <Button
        color="primary"
        fill="none"
        size="mini"
        onClick={() => setDate(-1)}
        disabled={Math.ceil(dayjs(props.date).diff(dayjs(), 'day', true)) <= 0}
      >
        前一天
      </Button>

      <span>{props.date}</span>

      <Button
        color="primary"
        fill="none"
        size="mini"
        onClick={() => setDate(1)}
        disabled={Math.ceil(dayjs(props.date).diff(dayjs(), 'day', true)) >= 4}
      >
        后一天
      </Button>
    </div>
  )
}

export default NavDate
